<template>
  <div class="home">
    <HeaderView />
    <div class="main scroll-main-y">
      <RouterView />
      <FootView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import HeaderView from "@/components/home/HeaderView.vue";
import FootView from "@/components/home/FootView.vue";
import { RouterView } from "vue-router";
import { startSakura } from "@/animation";

onMounted(() => {
  startSakura();
});
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  .main {
    flex: 1;
    width: 80%;
  }
}
</style>
